<template>
    <van-nav-bar title="优惠券详情" left-text="" left-arrow @click-left="goBack" />
    <div class="coupon_detail">
        <div class="coupon_info">
            <div class="left">
                <div class="left_top">
                    <div>
                        ￥<span>{{ info.rate * 100 }}</span>折
                    </div>
                    <div class="top_info">
                        <div>优惠券</div>
                        <div>COUPON</div>
                    </div>
                </div>
            </div>
            <div class="receive">
                <button class="receive_btn" v-if="info.receive_text">已领取</button>
                <button class="right_btn" v-else @click="geReceive">立即领取</button>
            </div>
        </div>
        <div class="coupon_prompt">
            <div class="prompt_title">温馨提示：</div>
            <div><span>•</span>活动开始：{{ info.createtime_text }}</div>
            <div><span>•</span>活动结束：{{ info.endtime_text }}</div>
            <div><span>•</span>领取数量：{{ info.total }}张，每人限领1张</div>
        </div>
    </div>
</template>
<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => {
    proxy.$router.go(-1)
}
const cid = ref(proxy.$route.query.cid ?? 0);
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ?? { id: 0 });
const info = ref({})
onBeforeMount(() => {
    getCouponInfoData()
})
const getCouponInfoData = async () => {
    let result = await Api.CouponInfo({
        busid: LoginUser.id,
        cid: cid.value
    })
    if (result.code == 1) {
        info.value = result.data
    }
}
const geReceive = async () => {
    if (!LoginUser.id) {
        error({
            message: '未登陆，请先去登陆',
            onClose: () => {
                proxy.$router.push('/business/login')
            }
        });
        return false
    }
    let result = await Api.CouponReceive({
        busid: LoginUser.id,
        cid: cid.value
    })
    if (result.code == 1) {
        success(result.msg);
        getCouponInfoData()
    } else {
        error(result.msg);
    }
}
</script>
<style>
@import url('/assets/css/coupon-info.css');
</style>